import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';
import 'package:intl/intl.dart';

void main() {
  return runApp(_ChartApp());
}

class _ChartApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: false),
      home: _MyHomePage(),
    );
  }
}

class _MyHomePage extends StatefulWidget {
  // ignore: prefer_const_constructors_in_immutables
  _MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<_MyHomePage> {
  List<_SalesData> categoryData = [
    _SalesData('Jan', 35),
    _SalesData('Feb', 28),
    _SalesData('Mar', 34),
    _SalesData('Apr', 32),
    _SalesData('May', 40)
  ];
  
  List<_NumericData> numericData = [
    _NumericData(1, 35),
    _NumericData(2, 28),
    _NumericData(3, 34),
    _NumericData(4, 32),
    _NumericData(5, 40)
  ];
  
  List<_DateTimeData> dateTimeData = [
    _DateTimeData(DateTime(2023, 1), 35),
    _DateTimeData(DateTime(2023, 2), 28),
    _DateTimeData(DateTime(2023, 3), 34),
    _DateTimeData(DateTime(2023, 4), 32),
    _DateTimeData(DateTime(2023, 5), 40)
  ];
  
  List<_LogData> logData = [
    _LogData(1, 10),
    _LogData(2, 100),
    _LogData(3, 1000),
    _LogData(4, 10000),
    _LogData(5, 100000)
  ];
  
  List<_ColumnData> columnData = [
    _ColumnData('Jan', 35, Colors.blue),
    _ColumnData('Feb', 28, Colors.green),
    _ColumnData('Mar', 34, Colors.orange),
    _ColumnData('Apr', 32, Colors.red),
    _ColumnData('May', 40, Colors.purple)
  ];
  
  late TrackballBehavior _trackballBehavior;
  late CrosshairBehavior _crosshairBehavior;
  late TooltipBehavior _tooltipBehavior;
  
  @override
  void initState() {
    _trackballBehavior = TrackballBehavior(
      enable: true,
      activationMode: ActivationMode.singleTap,
      tooltipDisplayMode: TrackballDisplayMode.floatAllPoints,
      lineType: TrackballLineType.vertical,
      tooltipSettings: InteractiveTooltip(
        enable: true,
        color: Colors.blue[100],
        borderColor: Colors.blue,
        borderWidth: 2,
        borderRadius: 8,
        arrowLength: 10,
        arrowWidth: 6,
        format: 'point.x : point.y',
        connectorLineColor: Colors.blue,
        connectorLineWidth: 2,
        connectorLineDashArray: <double>[5, 5],
        decimalPlaces: 2,
        canShowMarker: true,
        textStyle: TextStyle(
          color: Colors.blue,
          fontSize: 14,
          fontWeight: FontWeight.bold,
        ),
      ),
      markerSettings: TrackballMarkerSettings(
        markerVisibility: TrackballVisibilityMode.visible,
        shape: DataMarkerType.circle,
        color: Colors.blue,
        borderColor: Colors.white,
        borderWidth: 2,
        width: 10,
        height: 10,
      ),
    );
    
    _crosshairBehavior = CrosshairBehavior(
      enable: true,
      activationMode: ActivationMode.singleTap,
      lineType: CrosshairLineType.both,
      lineColor: Colors.red,
      lineWidth: 2,
      lineDashArray: [5, 5],
    );
    
    _tooltipBehavior = TooltipBehavior(
          enable: true,
          color: Colors.grey[100],
          borderColor: Colors.grey,
          borderWidth: 2,
          format: '{series.name} : {point.y}',
          decimalPlaces: 2,
          textStyle: TextStyle(
            color: Colors.black,
            fontSize: 12,
            fontWeight: FontWeight.bold,
          ),
          opacity: 0.9,
          duration: 2000,
          animationDuration: 500,
        );
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Syncfusion Flutter Charts - Axis Demo'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              // Category Axis Example with Trackball
              _buildChartSection(
                'Category Axis with Trackball',
                SfCartesianChart(
                  primaryXAxis: CategoryAxis(
                    labelPlacement: LabelPlacement.onTicks,
                    arrangeByIndex: false,
                    labelRotation: 45, // 使用角度旋转标签
                    labelIntersectAction: AxisLabelIntersectAction.rotate45, // 使用枚举处理标签交叉
                    interactiveTooltip: InteractiveTooltip(
                      enable: true,
                      color: Colors.blue[100],
                      borderColor: Colors.blue,
                      borderWidth: 2,
                      borderRadius: 8,
                      arrowLength: 10,
                      arrowWidth: 6,
                      format: 'X: {value}',
                      connectorLineColor: Colors.blue,
                      connectorLineWidth: 2,
                      decimalPlaces: 2,
                      canShowMarker: true,
                      textStyle: TextStyle(
                        color: Colors.blue,
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  primaryYAxis: NumericAxis(
                    interactiveTooltip: InteractiveTooltip(
                      enable: true,
                      color: Colors.blue[100],
                      borderColor: Colors.blue,
                      borderWidth: 2,
                      borderRadius: 8,
                      arrowLength: 10,
                      arrowWidth: 6,
                      format: 'Y: {value}',
                      connectorLineColor: Colors.blue,
                      connectorLineWidth: 2,
                      decimalPlaces: 2,
                      canShowMarker: true,
                      textStyle: TextStyle(
                        color: Colors.blue,
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  title: ChartTitle(
                                      text: 'Category Axis with Trackball',
                                      textStyle: TextStyle(
                                        color: Colors.blue,
                                        fontSize: 16,
                                        fontWeight: FontWeight.bold,
                                      ),
                                      alignment: ChartAlignment.center,
                                      backgroundColor: Colors.grey[100],
                                      borderColor: Colors.blue,
                                      borderWidth: 2,
                                    ),
                  // 显式设置图例位置为顶部，确保在所有平台上一致
                  legend: Legend(
                    isVisible: true,
                    position: LegendPosition.top,
                    alignment: ChartAlignment.center,
                    backgroundColor: Colors.grey[100],
                    borderColor: Colors.blue,
                    borderWidth: 2,
                    opacity: 0.9,
                    padding: 10.0,
                    iconHeight: 15.0,
                    iconWidth: 15.0,
                    toggleSeriesVisibility: true,
                    textStyle: TextStyle(
                      color: Colors.blue,
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                    ),
                    isResponsive: true,
                    orientation: LegendItemOrientation.horizontal,
                    overflowMode: LegendItemOverflowMode.scroll,
                    itemPadding: 20.0,
                    iconBorderColor: Colors.blue,
                    iconBorderWidth: 1.0,
                  ),
                  trackballBehavior: _trackballBehavior,
                  tooltipBehavior: _tooltipBehavior,
                  series: <CartesianSeries<_SalesData, String>>[
                    LineSeries<_SalesData, String>(
                      dataSource: categoryData,
                      xValueMapper: (_SalesData sales, _) => sales.year,
                      yValueMapper: (_SalesData sales, _) => sales.sales,
                      name: 'Sales',
                      trendlines: <Trendline>[
                        Trendline(
                          type: TrendlineType.linear,
                          color: Colors.red,
                          width: 2,
                          dashArray: <double>[5, 5],
                          name: 'Linear Trend',
                          legendIconType: LegendIconType.horizontalLine,
                          isVisible: true,
                          isVisibleInLegend: true,
                          opacity: 0.8,
                          forwardForecast: 2,
                          backwardForecast: 1,
                          animationDuration: 1000,
                          markerSettings: MarkerSettings(
                            isVisible: true,
                            shape: DataMarkerType.circle,
                            color: Colors.red,
                            borderColor: Colors.white,
                            borderWidth: 2,
                            width: 6,
                            height: 6,
                          ),
                        ),
                      ],
                      dataLabelSettings: DataLabelSettings(
                        isVisible: true,
                        color: Colors.white,
                        textStyle: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                        ),
                        borderColor: Colors.blue,
                        borderWidth: 2,
                        borderRadius: 5,
                        alignment: ChartAlignment.center,
                        margin: EdgeInsets.all(5),
                        opacity: 0.8,
                        labelAlignment: ChartDataLabelAlignment.auto,
                        angle: 0,
                        useSeriesColor: false,
                        showZeroValue: true,
                        overflowMode: OverflowMode.none,
                        labelIntersectAction: LabelIntersectAction.shift,
                        labelPosition: ChartDataLabelPosition.inside,
                      ),
                    )
                  ],
                ),
              ),
              
              // Numeric Axis Example with Crosshair
              _buildChartSection(
                'Numeric Axis with Crosshair',
                SfCartesianChart(
                  primaryXAxis: NumericAxis(
                    minimum: 0,
                    maximum: 6,
                    interval: 1,
                    labelFormat: '{value}',
                    rangePadding: ChartRangePadding.normal, // 使用范围填充枚举
                    edgeLabelPlacement: EdgeLabelPlacement.shift, // 使用边缘标签放置枚举
                    interactiveTooltip: InteractiveTooltip(
                      enable: true,
                      color: Colors.red[100],
                      borderColor: Colors.red,
                      borderWidth: 2,
                      borderRadius: 8,
                      arrowLength: 10,
                      arrowWidth: 6,
                      format: 'X: {value}',
                      connectorLineColor: Colors.red,
                      connectorLineWidth: 2,
                      decimalPlaces: 2,
                      canShowMarker: true,
                      textStyle: TextStyle(
                        color: Colors.red,
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  primaryYAxis: NumericAxis(
                    labelFormat: '\${value}',
                    interactiveTooltip: InteractiveTooltip(
                      enable: true,
                      color: Colors.red[100],
                      borderColor: Colors.red,
                      borderWidth: 2,
                      borderRadius: 8,
                      arrowLength: 10,
                      arrowWidth: 6,
                      format: 'Y: \${value}',
                      connectorLineColor: Colors.red,
                      connectorLineWidth: 2,
                      decimalPlaces: 2,
                      canShowMarker: true,
                      textStyle: TextStyle(
                        color: Colors.red,
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  title: ChartTitle(
                                      text: 'Numeric Axis with Crosshair',
                                      textStyle: TextStyle(
                                        color: Colors.red,
                                        fontSize: 16,
                                        fontWeight: FontWeight.bold,
                                      ),
                                      alignment: ChartAlignment.center,
                                      backgroundColor: Colors.grey[100],
                                      borderColor: Colors.red,
                                      borderWidth: 2,
                                    ),
                  // 显式设置图例位置为顶部，确保在所有平台上一致
                  legend: Legend(
                    isVisible: true,
                    position: LegendPosition.top,
                    alignment: ChartAlignment.center,
                    backgroundColor: Colors.grey[100],
                    borderColor: Colors.red,
                    borderWidth: 2,
                    opacity: 0.9,
                    padding: 10.0,
                    iconHeight: 15.0,
                    iconWidth: 15.0,
                    toggleSeriesVisibility: true,
                    textStyle: TextStyle(
                      color: Colors.red,
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                    ),
                    isResponsive: true,
                    orientation: LegendItemOrientation.horizontal,
                    overflowMode: LegendItemOverflowMode.scroll,
                    itemPadding: 20.0,
                    iconBorderColor: Colors.red,
                    iconBorderWidth: 1.0,
                  ),
                  crosshairBehavior: _crosshairBehavior,
                  tooltipBehavior: _tooltipBehavior,
                  series: <CartesianSeries<_NumericData, double>>[
                    LineSeries<_NumericData, double>(
                      dataSource: numericData,
                      xValueMapper: (_NumericData data, _) => data.month,
                      yValueMapper: (_NumericData data, _) => data.sales,
                      name: 'Sales',
                      trendlines: <Trendline>[
                        Trendline(
                          type: TrendlineType.polynomial,
                          polynomialOrder: 3,
                          color: Colors.green,
                          width: 2,
                          name: 'Polynomial Trend',
                          legendIconType: LegendIconType.horizontalLine,
                          isVisible: true,
                          isVisibleInLegend: true,
                          opacity: 0.8,
                          animationDuration: 1000,
                          markerSettings: MarkerSettings(
                            isVisible: true,
                            shape: DataMarkerType.diamond,
                            color: Colors.green,
                            borderColor: Colors.white,
                            borderWidth: 2,
                            width: 6,
                            height: 6,
                          ),
                        ),
                      ],
                      dataLabelSettings: DataLabelSettings(
                        isVisible: true,
                        color: Colors.white,
                        textStyle: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                        ),
                        borderColor: Colors.red,
                        borderWidth: 2,
                        borderRadius: 5,
                        alignment: ChartAlignment.center,
                        margin: EdgeInsets.all(5),
                        opacity: 0.8,
                        labelAlignment: ChartDataLabelAlignment.auto,
                        angle: 0,
                        useSeriesColor: false,
                        showZeroValue: true,
                        overflowMode: OverflowMode.none,
                        labelIntersectAction: LabelIntersectAction.shift,
                        labelPosition: ChartDataLabelPosition.inside,
                      ),
                    )
                  ],
                ),
              ),
              
              // DateTime Axis Example
              _buildChartSection(
                'DateTime Axis',
                SfCartesianChart(
                  primaryXAxis: DateTimeAxis(
                    dateFormat: DateFormat('MMM yyyy'),
                    intervalType: DateTimeIntervalType.months,
                    labelFormat: '{value}',
                    tickPosition: TickPosition.outside, // 使用刻度位置枚举
                    majorTickLines: MajorTickLines(
                      width: 2,
                      color: Colors.green,
                      size: 10,
                    ),
                    minorTickLines: MinorTickLines(
                      width: 1,
                      color: Colors.green.withOpacity(0.7),
                      size: 5,
                    ),
                    interactiveTooltip: InteractiveTooltip(
                      enable: true,
                      color: Colors.green[100],
                      borderColor: Colors.green,
                      borderWidth: 2,
                      borderRadius: 8,
                      arrowLength: 10,
                      arrowWidth: 6,
                      format: 'X: {value}',
                      connectorLineColor: Colors.green,
                      connectorLineWidth: 2,
                      decimalPlaces: 2,
                      canShowMarker: true,
                      textStyle: TextStyle(
                        color: Colors.green,
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  primaryYAxis: NumericAxis(
                    interactiveTooltip: InteractiveTooltip(
                      enable: true,
                      color: Colors.green[100],
                      borderColor: Colors.green,
                      borderWidth: 2,
                      borderRadius: 8,
                      arrowLength: 10,
                      arrowWidth: 6,
                      format: 'Y: {value}',
                      connectorLineColor: Colors.green,
                      connectorLineWidth: 2,
                      decimalPlaces: 2,
                      canShowMarker: true,
                      textStyle: TextStyle(
                        color: Colors.green,
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  title: ChartTitle(
                                      text: 'DateTime Axis Example',
                                      textStyle: TextStyle(
                                        color: Colors.green,
                                        fontSize: 16,
                                        fontWeight: FontWeight.bold,
                                      ),
                                      alignment: ChartAlignment.center,
                                      backgroundColor: Colors.grey[100],
                                      borderColor: Colors.green,
                                      borderWidth: 2,
                                    ),
                  // 显式设置图例位置为顶部，确保在所有平台上一致
                  legend: Legend(
                    isVisible: true,
                    position: LegendPosition.top,
                    alignment: ChartAlignment.center,
                    backgroundColor: Colors.grey[100],
                    borderColor: Colors.green,
                    borderWidth: 2,
                    opacity: 0.9,
                    padding: 10.0,
                    iconHeight: 15.0,
                    iconWidth: 15.0,
                    toggleSeriesVisibility: true,
                    textStyle: TextStyle(
                      color: Colors.green,
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                    ),
                    isResponsive: true,
                    orientation: LegendItemOrientation.horizontal,
                    overflowMode: LegendItemOverflowMode.scroll,
                    itemPadding: 20.0,
                    iconBorderColor: Colors.green,
                    iconBorderWidth: 1.0,
                  ),
                  tooltipBehavior: _tooltipBehavior,
                  series: <CartesianSeries<_DateTimeData, DateTime>>[
                    LineSeries<_DateTimeData, DateTime>(
                      dataSource: dateTimeData,
                      xValueMapper: (_DateTimeData data, _) => data.month,
                      yValueMapper: (_DateTimeData data, _) => data.sales,
                      name: 'Sales',
                      trendlines: <Trendline>[
                        Trendline(
                          type: TrendlineType.exponential,
                          color: Colors.purple,
                          width: 2,
                          dashArray: <double>[3, 3],
                          name: 'Exponential Trend',
                          legendIconType: LegendIconType.horizontalLine,
                          isVisible: true,
                          isVisibleInLegend: true,
                          opacity: 0.8,
                          forwardForecast: 1,
                          backwardForecast: 1,
                          animationDuration: 1000,
                          markerSettings: MarkerSettings(
                            isVisible: true,
                            shape: DataMarkerType.triangle,
                            color: Colors.purple,
                            borderColor: Colors.white,
                            borderWidth: 2,
                            width: 6,
                            height: 6,
                          ),
                        ),
                      ],
                      dataLabelSettings: DataLabelSettings(
                        isVisible: true,
                        color: Colors.white,
                        textStyle: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                        ),
                        borderColor: Colors.green,
                        borderWidth: 2,
                        borderRadius: 5,
                        alignment: ChartAlignment.center,
                        margin: EdgeInsets.all(5),
                        opacity: 0.8,
                        labelAlignment: ChartDataLabelAlignment.auto,
                        angle: 0,
                        useSeriesColor: false,
                        showZeroValue: true,
                        overflowMode: OverflowMode.none,
                        labelIntersectAction: LabelIntersectAction.shift,
                        labelPosition: ChartDataLabelPosition.inside,
                      ),
                    )
                  ],
                ),
              ),
              
              // Logarithmic Axis Example
              _buildChartSection(
                'Logarithmic Axis',
                SfCartesianChart(
                  primaryXAxis: NumericAxis(
                    interactiveTooltip: InteractiveTooltip(
                      enable: true,
                      color: Colors.purple[100],
                      borderColor: Colors.purple,
                      borderWidth: 2,
                      borderRadius: 8,
                      arrowLength: 10,
                      arrowWidth: 6,
                      format: 'X: {value}',
                      connectorLineColor: Colors.purple,
                      connectorLineWidth: 2,
                      decimalPlaces: 2,
                      canShowMarker: true,
                      textStyle: TextStyle(
                        color: Colors.purple,
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  primaryYAxis: LogarithmicAxis(
                    logBase: 10,
                    labelFormat: '{value}',
                    edgeLabelPlacement: EdgeLabelPlacement.hide, // 使用边缘标签放置枚举
                    interactiveTooltip: InteractiveTooltip(
                      enable: true,
                      color: Colors.purple[100],
                      borderColor: Colors.purple,
                      borderWidth: 2,
                      borderRadius: 8,
                      arrowLength: 10,
                      arrowWidth: 6,
                      format: 'Y: {value}',
                      connectorLineColor: Colors.purple,
                      connectorLineWidth: 2,
                      decimalPlaces: 2,
                      canShowMarker: true,
                      textStyle: TextStyle(
                        color: Colors.purple,
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  title: ChartTitle(
                                      text: 'Logarithmic Axis Example',
                                      textStyle: TextStyle(
                                        color: Colors.purple,
                                        fontSize: 16,
                                        fontWeight: FontWeight.bold,
                                      ),
                                      alignment: ChartAlignment.center,
                                      backgroundColor: Colors.grey[100],
                                      borderColor: Colors.purple,
                                      borderWidth: 2,
                                    ),
                  // 显式设置图例位置为顶部，确保在所有平台上一致
                  legend: Legend(
                    isVisible: true,
                    position: LegendPosition.top,
                    alignment: ChartAlignment.center,
                    backgroundColor: Colors.grey[100],
                    borderColor: Colors.purple,
                    borderWidth: 2,
                    opacity: 0.9,
                    padding: 10.0,
                    iconHeight: 15.0,
                    iconWidth: 15.0,
                    toggleSeriesVisibility: true,
                    textStyle: TextStyle(
                      color: Colors.purple,
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                    ),
                    isResponsive: true,
                    orientation: LegendItemOrientation.horizontal,
                    overflowMode: LegendItemOverflowMode.scroll,
                    itemPadding: 20.0,
                    iconBorderColor: Colors.purple,
                    iconBorderWidth: 1.0,
                  ),
                  tooltipBehavior: _tooltipBehavior,
                  series: <CartesianSeries<_LogData, double>>[
                    LineSeries<_LogData, double>(
                      dataSource: logData,
                      xValueMapper: (_LogData data, _) => data.month,
                      yValueMapper: (_LogData data, _) => data.sales,
                      name: 'Growth',
                      trendlines: <Trendline>[
                        Trendline(
                          type: TrendlineType.power,
                          color: Colors.orange,
                          width: 2,
                          name: 'Power Trend',
                          legendIconType: LegendIconType.horizontalLine,
                          isVisible: true,
                          isVisibleInLegend: true,
                          opacity: 0.8,
                          animationDuration: 1000,
                          markerSettings: MarkerSettings(
                            isVisible: true,
                            shape: DataMarkerType.pentagon,
                            color: Colors.orange,
                            borderColor: Colors.white,
                            borderWidth: 2,
                            width: 6,
                            height: 6,
                          ),
                        ),
                      ],
                      dataLabelSettings: DataLabelSettings(
                        isVisible: true,
                        color: Colors.white,
                        textStyle: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                        ),
                        borderColor: Colors.purple,
                        borderWidth: 2,
                        borderRadius: 5,
                        alignment: ChartAlignment.center,
                        margin: EdgeInsets.all(5),
                        opacity: 0.8,
                        labelAlignment: ChartDataLabelAlignment.auto,
                        angle: 0,
                        useSeriesColor: false,
                        showZeroValue: true,
                        overflowMode: OverflowMode.none,
                        labelIntersectAction: LabelIntersectAction.shift,
                        labelPosition: ChartDataLabelPosition.inside,
                      ),
                    )
                  ],
                ),
              ),
              
              // Axis with Plot Bands
              _buildChartSection(
                'Axis with Plot Bands',
                SfCartesianChart(
                  primaryXAxis: CategoryAxis(
                    interactiveTooltip: InteractiveTooltip(
                      enable: true,
                      color: Colors.orange[100],
                      borderColor: Colors.orange,
                      borderWidth: 2,
                      borderRadius: 8,
                      arrowLength: 10,
                      arrowWidth: 6,
                      format: 'X: {value}',
                      connectorLineColor: Colors.orange,
                      connectorLineWidth: 2,
                      decimalPlaces: 2,
                      canShowMarker: true,
                      textStyle: TextStyle(
                        color: Colors.orange,
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  primaryYAxis: NumericAxis(
                    plotBands: <PlotBand>[
                      PlotBand(
                        start: 0,
                        end: 30,
                        color: Colors.red.withOpacity(0.3),
                        text: 'Low',
                        textStyle: TextStyle(color: Colors.red, fontSize: 12),
                      ),
                      PlotBand(
                        start: 30,
                        end: 40,
                        color: Colors.orange.withOpacity(0.3),
                        text: 'Medium',
                        textStyle: TextStyle(color: Colors.orange, fontSize: 12),
                      ),
                      PlotBand(
                        start: 40,
                        end: 50,
                        color: Colors.green.withOpacity(0.3),
                        text: 'High',
                        textStyle: TextStyle(color: Colors.green, fontSize: 12),
                      ),
                    ],
                    interactiveTooltip: InteractiveTooltip(
                      enable: true,
                      color: Colors.orange[100],
                      borderColor: Colors.orange,
                      borderWidth: 2,
                      borderRadius: 8,
                      arrowLength: 10,
                      arrowWidth: 6,
                      format: 'Y: {value}',
                      connectorLineColor: Colors.orange,
                      connectorLineWidth: 2,
                      decimalPlaces: 2,
                      canShowMarker: true,
                      textStyle: TextStyle(
                        color: Colors.orange,
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  title: ChartTitle(
                                      text: 'Axis with Plot Bands',
                                      textStyle: TextStyle(
                                        color: Colors.orange,
                                        fontSize: 16,
                                        fontWeight: FontWeight.bold,
                                      ),
                                      alignment: ChartAlignment.center,
                                      backgroundColor: Colors.grey[100],
                                      borderColor: Colors.orange,
                                      borderWidth: 2,
                                    ),
                  // 显式设置图例位置为顶部，确保在所有平台上一致
                  legend: Legend(
                    isVisible: true,
                    position: LegendPosition.top,
                    alignment: ChartAlignment.center,
                    backgroundColor: Colors.grey[100],
                    borderColor: Colors.orange,
                    borderWidth: 2,
                    opacity: 0.9,
                    padding: 10.0,
                    iconHeight: 15.0,
                    iconWidth: 15.0,
                    toggleSeriesVisibility: true,
                    textStyle: TextStyle(
                      color: Colors.orange,
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                    ),
                    isResponsive: true,
                    orientation: LegendItemOrientation.horizontal,
                    overflowMode: LegendItemOverflowMode.scroll,
                    itemPadding: 20.0,
                    iconBorderColor: Colors.orange,
                    iconBorderWidth: 1.0,
                  ),
                  tooltipBehavior: _tooltipBehavior,
                  series: <CartesianSeries<_SalesData, String>>[
                    LineSeries<_SalesData, String>(
                      dataSource: categoryData,
                      xValueMapper: (_SalesData sales, _) => sales.year,
                      yValueMapper: (_SalesData sales, _) => sales.sales,
                      name: 'Sales',
                      trendlines: <Trendline>[
                        Trendline(
                          type: TrendlineType.logarithmic,
                          color: Colors.brown,
                          width: 2,
                          dashArray: <double>[4, 4],
                          name: 'Logarithmic Trend',
                          legendIconType: LegendIconType.horizontalLine,
                          isVisible: true,
                          isVisibleInLegend: true,
                          opacity: 0.8,
                          forwardForecast: 1,
                          backwardForecast: 1,
                          animationDuration: 1000,
                          markerSettings: MarkerSettings(
                            isVisible: true,
                            shape: DataMarkerType.invertedTriangle,
                            color: Colors.brown,
                            borderColor: Colors.white,
                            borderWidth: 2,
                            width: 6,
                            height: 6,
                          ),
                        ),
                      ],
                      dataLabelSettings: DataLabelSettings(
                        isVisible: true,
                        color: Colors.white,
                        textStyle: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                        ),
                        borderColor: Colors.orange,
                        borderWidth: 2,
                        borderRadius: 5,
                        alignment: ChartAlignment.center,
                        margin: EdgeInsets.all(5),
                        opacity: 0.8,
                        labelAlignment: ChartDataLabelAlignment.auto,
                        angle: 0,
                        useSeriesColor: false,
                        showZeroValue: true,
                        overflowMode: OverflowMode.none,
                        labelIntersectAction: LabelIntersectAction.shift,
                        labelPosition: ChartDataLabelPosition.inside,
                      ),
                    )
                  ],
                ),
              ),
              
              // Multi-level Labels Example
              _buildChartSection(
                'Multi-level Labels',
                SfCartesianChart(
                  primaryXAxis: CategoryAxis(
                    multiLevelLabels: <CategoricalMultiLevelLabel>[
                      CategoricalMultiLevelLabel(
                        start: 'Jan',
                        end: 'Feb',
                        text: 'Q1',
                        level: 0,
                      ),
                      CategoricalMultiLevelLabel(
                        start: 'Mar',
                        end: 'Apr',
                        text: 'Q2',
                        level: 0,
                      ),
                      CategoricalMultiLevelLabel(
                        start: 'May',
                        end: 'May',
                        text: 'Q2',
                        level: 0,
                      ),
                    ],
                    interactiveTooltip: InteractiveTooltip(
                      enable: true,
                      color: Colors.teal[100],
                      borderColor: Colors.teal,
                      borderWidth: 2,
                      borderRadius: 8,
                      arrowLength: 10,
                      arrowWidth: 6,
                      format: 'X: {value}',
                      connectorLineColor: Colors.teal,
                      connectorLineWidth: 2,
                      decimalPlaces: 2,
                      canShowMarker: true,
                      textStyle: TextStyle(
                        color: Colors.teal,
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  primaryYAxis: NumericAxis(
                    interactiveTooltip: InteractiveTooltip(
                      enable: true,
                      color: Colors.teal[100],
                      borderColor: Colors.teal,
                      borderWidth: 2,
                      borderRadius: 8,
                      arrowLength: 10,
                      arrowWidth: 6,
                      format: 'Y: {value}',
                      connectorLineColor: Colors.teal,
                      connectorLineWidth: 2,
                      decimalPlaces: 2,
                      canShowMarker: true,
                      textStyle: TextStyle(
                        color: Colors.teal,
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  title: ChartTitle(
                                      text: 'Multi-level Labels Example',
                                      textStyle: TextStyle(
                                        color: Colors.teal,
                                        fontSize: 16,
                                        fontWeight: FontWeight.bold,
                                      ),
                                      alignment: ChartAlignment.center,
                                      backgroundColor: Colors.grey[100],
                                      borderColor: Colors.teal,
                                      borderWidth: 2,
                                    ),
                  // 显式设置图例位置为顶部，确保在所有平台上一致
                  legend: Legend(
                    isVisible: true,
                    position: LegendPosition.top,
                    alignment: ChartAlignment.center,
                    backgroundColor: Colors.grey[100],
                    borderColor: Colors.teal,
                    borderWidth: 2,
                    opacity: 0.9,
                    padding: 10.0,
                    iconHeight: 15.0,
                    iconWidth: 15.0,
                    toggleSeriesVisibility: true,
                    textStyle: TextStyle(
                      color: Colors.teal,
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                    ),
                    isResponsive: true,
                    orientation: LegendItemOrientation.horizontal,
                    overflowMode: LegendItemOverflowMode.scroll,
                    itemPadding: 20.0,
                    iconBorderColor: Colors.teal,
                    iconBorderWidth: 1.0,
                  ),
                  tooltipBehavior: _tooltipBehavior,
                  series: <CartesianSeries<_SalesData, String>>[
                    LineSeries<_SalesData, String>(
                      dataSource: categoryData,
                      xValueMapper: (_SalesData sales, _) => sales.year,
                      yValueMapper: (_SalesData sales, _) => sales.sales,
                      name: 'Sales',
                      trendlines: <Trendline>[
                        Trendline(
                          type: TrendlineType.movingAverage,
                          period: 2,
                          color: Colors.cyan,
                          width: 2,
                          name: 'Moving Average',
                          legendIconType: LegendIconType.horizontalLine,
                          isVisible: true,
                          isVisibleInLegend: true,
                          opacity: 0.8,
                          animationDuration: 1000,
                          markerSettings: MarkerSettings(
                            isVisible: true,
                            shape: DataMarkerType.circle,
                            color: Colors.cyan,
                            borderColor: Colors.white,
                            borderWidth: 2,
                            width: 6,
                            height: 6,
                          ),
                        ),
                      ],
                      dataLabelSettings: DataLabelSettings(
                        isVisible: true,
                        color: Colors.white,
                        textStyle: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                        ),
                        borderColor: Colors.teal,
                        borderWidth: 2,
                        borderRadius: 5,
                        alignment: ChartAlignment.center,
                        margin: EdgeInsets.all(5),
                        opacity: 0.8,
                        labelAlignment: ChartDataLabelAlignment.auto,
                        angle: 0,
                        useSeriesColor: false,
                        showZeroValue: true,
                        overflowMode: OverflowMode.none,
                        labelIntersectAction: LabelIntersectAction.shift,
                        labelPosition: ChartDataLabelPosition.inside,
                      ),
                    )
                  ],
                ),
              ),
              
              // Spark Chart
              _buildChartSection(
                'Column Series',
                SfCartesianChart(
                  primaryXAxis: CategoryAxis(),
                  primaryYAxis: NumericAxis(),
                  title: ChartTitle(
                    text: 'Column Series Example',
                    textStyle: TextStyle(
                      color: Colors.pink,
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                    alignment: ChartAlignment.center,
                    backgroundColor: Colors.grey[100],
                    borderColor: Colors.pink,
                    borderWidth: 2,
                  ),
                  legend: Legend(
                    isVisible: true,
                    position: LegendPosition.top,
                    alignment: ChartAlignment.center,
                    backgroundColor: Colors.grey[100],
                    borderColor: Colors.pink,
                    borderWidth: 2,
                    opacity: 0.9,
                    padding: 10.0,
                    iconHeight: 15.0,
                    iconWidth: 15.0,
                    toggleSeriesVisibility: true,
                    textStyle: TextStyle(
                      color: Colors.pink,
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                    ),
                    isResponsive: true,
                    orientation: LegendItemOrientation.horizontal,
                    overflowMode: LegendItemOverflowMode.scroll,
                    itemPadding: 20.0,
                    iconBorderColor: Colors.pink,
                    iconBorderWidth: 1.0,
                  ),
                  tooltipBehavior: _tooltipBehavior,
                  series: <CartesianSeries<_ColumnData, String>>[
                    ColumnSeries<_ColumnData, String>(
                      dataSource: columnData,
                      xValueMapper: (_ColumnData data, _) => data.category,
                      yValueMapper: (_ColumnData data, _) => data.value,
                      pointColorMapper: (_ColumnData data, _) => data.color,
                      name: 'Sales',
                      trendlines: <Trendline>[
                        Trendline(
                          type: TrendlineType.linear,
                          color: Colors.pink,
                          width: 2,
                          name: 'Linear Trend',
                          legendIconType: LegendIconType.horizontalLine,
                          isVisible: true,
                          isVisibleInLegend: true,
                          opacity: 0.8,
                          animationDuration: 1000,
                          markerSettings: MarkerSettings(
                            isVisible: true,
                            shape: DataMarkerType.diamond,
                            color: Colors.pink,
                            borderColor: Colors.white,
                            borderWidth: 2,
                            width: 6,
                            height: 6,
                          ),
                        ),
                      ],
                      dataLabelSettings: DataLabelSettings(
                        isVisible: true,
                        color: Colors.white,
                        textStyle: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                        ),
                        borderColor: Colors.pink,
                        borderWidth: 2,
                        borderRadius: 5,
                        alignment: ChartAlignment.center,
                        margin: EdgeInsets.all(5),
                        opacity: 0.8,
                        labelAlignment: ChartDataLabelAlignment.auto,
                        angle: 0,
                        useSeriesColor: false,
                        showZeroValue: true,
                        overflowMode: OverflowMode.none,
                        labelIntersectAction: LabelIntersectAction.shift,
                        labelPosition: ChartDataLabelPosition.inside,
                      ),
                      width: 0.8,
                      spacing: 0.1,
                      borderRadius: BorderRadius.all(Radius.circular(5)),
                      borderColor: Colors.black,
                      borderWidth: 1,
                      isTrackVisible: false,
                    )
                  ],
                ),
              ),
              _buildChartSection(
                'Bar Series',
                SfCartesianChart(
                  isTransposed: true,
                  primaryXAxis: CategoryAxis(),
                  primaryYAxis: NumericAxis(),
                  title: ChartTitle(
                    text: 'Bar Series Example',
                    textStyle: TextStyle(
                      color: Colors.indigo,
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                    alignment: ChartAlignment.center,
                    backgroundColor: Colors.grey[100],
                    borderColor: Colors.indigo,
                    borderWidth: 2,
                  ),
                  legend: Legend(
                    isVisible: true,
                    position: LegendPosition.top,
                    alignment: ChartAlignment.center,
                    backgroundColor: Colors.grey[100],
                    borderColor: Colors.indigo,
                    borderWidth: 2,
                    opacity: 0.9,
                    padding: 10.0,
                    iconHeight: 15.0,
                    iconWidth: 15.0,
                    toggleSeriesVisibility: true,
                    textStyle: TextStyle(
                      color: Colors.indigo,
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                    ),
                    isResponsive: true,
                    orientation: LegendItemOrientation.horizontal,
                    overflowMode: LegendItemOverflowMode.scroll,
                    itemPadding: 20.0,
                    iconBorderColor: Colors.indigo,
                    iconBorderWidth: 1.0,
                  ),
                  tooltipBehavior: _tooltipBehavior,
                  series: <CartesianSeries<_ColumnData, String>>[
                    BarSeries<_ColumnData, String>(
                      dataSource: columnData,
                      xValueMapper: (_ColumnData data, _) => data.category,
                      yValueMapper: (_ColumnData data, _) => data.value,
                      pointColorMapper: (_ColumnData data, _) => data.color,
                      name: 'Sales',
                      trendlines: <Trendline>[
                        Trendline(
                          type: TrendlineType.linear,
                          color: Colors.indigo,
                          width: 2,
                          name: 'Linear Trend',
                          legendIconType: LegendIconType.horizontalLine,
                          isVisible: true,
                          isVisibleInLegend: true,
                          opacity: 0.8,
                          animationDuration: 1000,
                          markerSettings: MarkerSettings(
                            isVisible: true,
                            shape: DataMarkerType.triangle,
                            color: Colors.indigo,
                            borderColor: Colors.white,
                            borderWidth: 2,
                            width: 6,
                            height: 6,
                          ),
                        ),
                      ],
                      dataLabelSettings: DataLabelSettings(
                        isVisible: true,
                        color: Colors.white,
                        textStyle: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                        ),
                        borderColor: Colors.indigo,
                        borderWidth: 2,
                        borderRadius: 5,
                        alignment: ChartAlignment.center,
                        margin: EdgeInsets.all(5),
                        opacity: 0.8,
                        labelAlignment: ChartDataLabelAlignment.auto,
                        angle: 0,
                        useSeriesColor: false,
                        showZeroValue: true,
                        overflowMode: OverflowMode.none,
                        labelIntersectAction: LabelIntersectAction.shift,
                        labelPosition: ChartDataLabelPosition.inside,
                      ),
                      width: 0.8,
                      spacing: 0.1,
                      borderRadius: BorderRadius.all(Radius.circular(5)),
                      borderColor: Colors.black,
                      borderWidth: 1,
                      isTrackVisible: false,
                    )
                  ],
                ),
              ),
              _buildChartSection(
                'Scatter Series',
                SfCartesianChart(
                  primaryXAxis: NumericAxis(),
                  primaryYAxis: NumericAxis(),
                  title: ChartTitle(
                    text: 'Scatter Series Example',
                    textStyle: TextStyle(
                      color: Colors.teal,
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                    alignment: ChartAlignment.center,
                    backgroundColor: Colors.grey[100],
                    borderColor: Colors.teal,
                    borderWidth: 2,
                  ),
                  legend: Legend(
                    isVisible: true,
                    position: LegendPosition.top,
                    alignment: ChartAlignment.center,
                    backgroundColor: Colors.grey[100],
                    borderColor: Colors.teal,
                    borderWidth: 2,
                    opacity: 0.9,
                    padding: 10.0,
                    iconHeight: 15.0,
                    iconWidth: 15.0,
                    toggleSeriesVisibility: true,
                    textStyle: TextStyle(
                      color: Colors.teal,
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                    ),
                    isResponsive: true,
                    orientation: LegendItemOrientation.horizontal,
                    overflowMode: LegendItemOverflowMode.scroll,
                    itemPadding: 20.0,
                    iconBorderColor: Colors.teal,
                    iconBorderWidth: 1.0,
                  ),
                  tooltipBehavior: _tooltipBehavior,
                  series: <CartesianSeries<_NumericData, double>>[
                    ScatterSeries<_NumericData, double>(
                      dataSource: numericData,
                      xValueMapper: (_NumericData data, _) => data.month,
                      yValueMapper: (_NumericData data, _) => data.sales,
                      name: 'Sales',
                      trendlines: <Trendline>[
                        Trendline(
                          type: TrendlineType.linear,
                          color: Colors.teal,
                          width: 2,
                          name: 'Linear Trend',
                          legendIconType: LegendIconType.horizontalLine,
                          isVisible: true,
                          isVisibleInLegend: true,
                          opacity: 0.8,
                          animationDuration: 1000,
                          markerSettings: MarkerSettings(
                            isVisible: true,
                            shape: DataMarkerType.circle,
                            color: Colors.teal,
                            borderColor: Colors.white,
                            borderWidth: 2,
                            width: 6,
                            height: 6,
                          ),
                        ),
                      ],
                      dataLabelSettings: DataLabelSettings(
                        isVisible: true,
                        color: Colors.white,
                        textStyle: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                        ),
                        borderColor: Colors.teal,
                        borderWidth: 2,
                        borderRadius: 5,
                        alignment: ChartAlignment.center,
                        margin: EdgeInsets.all(5),
                        opacity: 0.8,
                        labelAlignment: ChartDataLabelAlignment.auto,
                        angle: 0,
                        useSeriesColor: false,
                        showZeroValue: true,
                        overflowMode: OverflowMode.none,
                        labelIntersectAction: LabelIntersectAction.shift,
                        labelPosition: ChartDataLabelPosition.inside,
                      ),
                      markerSettings: MarkerSettings(
                        shape: DataMarkerType.circle,
                        color: Colors.teal,
                        borderColor: Colors.black,
                        borderWidth: 2,
                        width: 10,
                        height: 10,
                      ),
                      borderColor: Colors.black,
                      borderWidth: 1,
                    )
                  ],
                ),
              ),
              _buildChartSection(
                'Spark Line Chart',
                SfSparkLineChart.custom(
                  trackball: SparkChartTrackball(
                    activationMode: SparkChartActivationMode.tap,
                    width: 2,
                    color: Colors.blue,
                    dashArray: <double>[5, 5],
                    labelStyle: TextStyle(
                      color: Colors.white,
                      fontSize: 12,
                      fontWeight: FontWeight.bold,
                    ),
                    backgroundColor: Colors.blue[300],
                    borderColor: Colors.blue,
                    borderWidth: 2,
                    borderRadius: BorderRadius.all(Radius.circular(5)),
                    shouldAlwaysShow: false,
                    hideDelay: 1000,
                  ),
                  marker: SparkChartMarker(
                    displayMode: SparkChartMarkerDisplayMode.all,
                    shape: SparkChartMarkerShape.circle,
                    color: Colors.red,
                    borderColor: Colors.white,
                    borderWidth: 2,
                    size: 8,
                  ),
                  labelDisplayMode: SparkChartLabelDisplayMode.high,
                  labelStyle: TextStyle(
                    color: Colors.black,
                    fontSize: 10,
                    fontWeight: FontWeight.bold,
                  ),
                  xValueMapper: (int index) => categoryData[index].year,
                  yValueMapper: (int index) => categoryData[index].sales,
                  dataCount: 5,
                  axisLineWidth: 1,
                  axisLineColor: Colors.grey,
                  axisLineDashArray: <double>[3, 3],
                  axisCrossesAt: 0,
                  isInversed: false,
                  highPointColor: Colors.green,
                  lowPointColor: Colors.orange,
                  negativePointColor: Colors.red,
                  firstPointColor: Colors.purple,
                  lastPointColor: Colors.pink,
                  color: Colors.blue,
                  width: 2,
                ),
              ),
              _buildChartSection(
                'Spark Area Chart',
                SfSparkAreaChart.custom(
                  trackball: SparkChartTrackball(
                    activationMode: SparkChartActivationMode.doubleTap,
                    width: 2,
                    color: Colors.green,
                    labelStyle: TextStyle(
                      color: Colors.white,
                      fontSize: 12,
                      fontWeight: FontWeight.bold,
                    ),
                    backgroundColor: Colors.green[300],
                    borderColor: Colors.green,
                    borderWidth: 2,
                    borderRadius: BorderRadius.all(Radius.circular(5)),
                    shouldAlwaysShow: false,
                    hideDelay: 1000,
                  ),
                  marker: SparkChartMarker(
                    displayMode: SparkChartMarkerDisplayMode.all,
                    shape: SparkChartMarkerShape.diamond,
                    color: Colors.orange,
                    borderColor: Colors.white,
                    borderWidth: 2,
                    size: 8,
                  ),
                  labelDisplayMode: SparkChartLabelDisplayMode.low,
                  labelStyle: TextStyle(
                    color: Colors.black,
                    fontSize: 10,
                    fontWeight: FontWeight.bold,
                  ),
                  xValueMapper: (int index) => categoryData[index].year,
                  yValueMapper: (int index) => categoryData[index].sales,
                  dataCount: 5,
                  axisLineWidth: 1,
                  axisLineColor: Colors.grey,
                  axisCrossesAt: 0,
                  isInversed: false,
                  highPointColor: Colors.green,
                  lowPointColor: Colors.orange,
                  negativePointColor: Colors.red,
                  firstPointColor: Colors.purple,
                  lastPointColor: Colors.pink,
                  color: Colors.green,
                  borderWidth: 2,
                ),
              ),
              _buildChartSection(
                'Spark Bar Chart',
                SfSparkBarChart.custom(
                  trackball: SparkChartTrackball(
                    activationMode: SparkChartActivationMode.longPress,
                    width: 2,
                    color: Colors.purple,
                    labelStyle: TextStyle(
                      color: Colors.white,
                      fontSize: 12,
                      fontWeight: FontWeight.bold,
                    ),
                    backgroundColor: Colors.purple[300],
                    borderColor: Colors.purple,
                    borderWidth: 2,
                    borderRadius: BorderRadius.all(Radius.circular(5)),
                    shouldAlwaysShow: false,
                    hideDelay: 1000,
                  ),
                  labelDisplayMode: SparkChartLabelDisplayMode.first,
                  labelStyle: TextStyle(
                    color: Colors.black,
                    fontSize: 10,
                    fontWeight: FontWeight.bold,
                  ),
                  xValueMapper: (int index) => categoryData[index].year,
                  yValueMapper: (int index) => categoryData[index].sales,
                  dataCount: 5,
                  axisLineWidth: 1,
                  axisLineColor: Colors.grey,
                  axisCrossesAt: 0,
                  isInversed: false,
                  highPointColor: Colors.green,
                  lowPointColor: Colors.orange,
                  negativePointColor: Colors.red,
                  firstPointColor: Colors.purple,
                  lastPointColor: Colors.pink,
                  color: Colors.purple,
                  borderWidth: 2,
                ),
              ),
              _buildChartSection(
                'Spark Win/Loss Chart',
                SfSparkWinLossChart.custom(
                  trackball: SparkChartTrackball(
                    activationMode: SparkChartActivationMode.tap,
                    width: 2,
                    color: Colors.orange,
                    labelStyle: TextStyle(
                      color: Colors.white,
                      fontSize: 12,
                      fontWeight: FontWeight.bold,
                    ),
                    backgroundColor: Colors.orange[300],
                    borderColor: Colors.orange,
                    borderWidth: 2,
                    borderRadius: BorderRadius.all(Radius.circular(5)),
                    shouldAlwaysShow: false,
                    hideDelay: 1000,
                  ),
                  xValueMapper: (int index) => categoryData[index].year,
                  yValueMapper: (int index) => categoryData[index].sales,
                  dataCount: 5,
                  axisLineWidth: 1,
                  axisLineColor: Colors.grey,
                  axisCrossesAt: 0,
                  isInversed: false,
                  highPointColor: Colors.green,
                  lowPointColor: Colors.red,
                  tiePointColor: Colors.blue,
                  firstPointColor: Colors.purple,
                  lastPointColor: Colors.pink,
                  color: Colors.orange,
                  borderWidth: 2,
                ),
              ),
              _buildChartSection(
                'Pie Chart',
                SfCircularChart(
                  title: ChartTitle(
                    text: 'Pie Chart Example',
                    textStyle: TextStyle(
                      color: Colors.deepOrange,
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                    alignment: ChartAlignment.center,
                    backgroundColor: Colors.grey[100],
                    borderColor: Colors.deepOrange,
                    borderWidth: 2,
                  ),
                  legend: Legend(
                    isVisible: true,
                    position: LegendPosition.bottom,
                    alignment: ChartAlignment.center,
                    backgroundColor: Colors.grey[100],
                    borderColor: Colors.deepOrange,
                    borderWidth: 2,
                    opacity: 0.9,
                    padding: 10.0,
                    iconHeight: 15.0,
                    iconWidth: 15.0,
                    toggleSeriesVisibility: true,
                    textStyle: TextStyle(
                      color: Colors.deepOrange,
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                    ),
                    isResponsive: true,
                    orientation: LegendItemOrientation.horizontal,
                    overflowMode: LegendItemOverflowMode.scroll,
                    itemPadding: 20.0,
                    iconBorderColor: Colors.deepOrange,
                    iconBorderWidth: 1.0,
                  ),
                  tooltipBehavior: _tooltipBehavior,
                  series: <CircularSeries<_SalesData, String>>[
                    PieSeries<_SalesData, String>(
                      dataSource: categoryData,
                      xValueMapper: (_SalesData data, _) => data.year,
                      yValueMapper: (_SalesData data, _) => data.sales,
                      name: 'Sales',
                      dataLabelSettings: DataLabelSettings(
                        isVisible: true,
                        color: Colors.white,
                        textStyle: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                        ),
                        borderColor: Colors.deepOrange,
                        borderWidth: 2,
                        borderRadius: 5,
                        alignment: ChartAlignment.center,
                        margin: EdgeInsets.all(5),
                        opacity: 0.8,
                        labelAlignment: ChartDataLabelAlignment.auto,
                        angle: 0,
                        useSeriesColor: false,
                        showZeroValue: true,
                        overflowMode: OverflowMode.none,
                        labelIntersectAction: LabelIntersectAction.shift,
                        labelPosition: ChartDataLabelPosition.inside,
                      ),
                      explode: true,
                      explodeAll: false,
                      explodeIndex: 2,
                      explodeOffset: '10%',
                      explodeGesture: ActivationMode.singleTap,
                      strokeColor: Colors.black,
                      strokeWidth: 2,
                    )
                  ],
                ),
              ),
            ],
          ),
        ));
  }
  
  Widget _buildChartSection(String title, Widget chart) {
    return Container(
      padding: EdgeInsets.all(10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 10),
          Container(
            height: 300,
            child: chart,
          ),
          Divider(),
        ],
      ),
    );
  }
}

class _SalesData {
  _SalesData(this.year, this.sales);

  final String year;
  final double sales;
}

class _NumericData {
  _NumericData(this.month, this.sales);

  final double month;
  final double sales;
}

class _DateTimeData {
  _DateTimeData(this.month, this.sales);

  final DateTime month;
  final double sales;
}

class _LogData {
  _LogData(this.month, this.sales);

  final double month;
  final double sales;
}

class _ColumnData {
  _ColumnData(this.category, this.value, this.color);

  final String category;
  final double value;
  final Color color;
}